<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>员工列表</title>
    <link rel="stylesheet" href="../static/css/yglb.css">
    <script src="../static/js/jquery.min.js"></script>
</head>

<body>
    
    <div>
        <input class="box Serial" type="text" placeholder="请输入要查询的员工编号">
        <button onclick="search()" class="box search">检索</button>
    
    <div class="table">
       <table>
            <tr>
                <td>员工编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>生日</td>
                <td>职位</td>
                <td>联系电话</td>
                <td>地址</td>
                <td>入职日期</td>
                <td>邮箱</td>
                <td>所在部门</td>
                <td>员工状态</td>
                <td>操作</td>
            </tr>
            
        <tbody id="tab">
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
        
       </table>
    </div>
    

    <div class="page">
        <table>
            <tr>
                <td>共 xx 条</td>
                <td>
                <button>上一页</button>
                </td>
                <td><button class="input_page">1</button></td>
                <td><button class="input_page">2</button></td>
                <td><button class="input_page">3</button></td>
                <td>...</td>
                <td><button>下一页</button></td>
                <td><select class="number">
                        <option value="1000">10条/页</option>
                    </td>
                <td>到第
                    <input class="input_page" type="text" placeholder="1">
                    页
                </td>
                <td>
                    <button>确定</button>
                </td>
                
            </tr>
        </table>        
    </div>
    
<script>
    // 搜索框搜索单个员工
    function search(){
        // $Serial=('.Serial').val();
        // console.log(Serial);
        // 发送ajax请求
        $.ajax({
                url:"http://127.0.0.1:8000/v1/emps",//?emp_id="+Serial,
                type:'get',
                data:JSON,//.stringify(post_data),
                contentType:'application/json',
                dataType:'json',
                success:function(res){
                    if(res.code==200){
                        $.each(res,function(k,content){
                        var form ="<tr><td>"+res.data[0].emp_id+"</td><td>"+res.data[0].name+"</td><td>"+res.data[0].gender+"</td><td>"+res.data[0].birthday+"</td><td>"+res.data[0].post+"</td><td>"+res.data[0].dept+"</td><td>"+res.data[0].phone+"</td><td>"+res.data[0].email+"</td><td>"
                        console.log(form)
                        $("#tab").append(form);  //添加到表格中
                        });

                    
                    }else{
                        alert(res.error)
						}
					}
				})
        
    };
    


</script>

</body>
</html>